<!DOCTYPE html>
<html lang="zh-CN"> <!-- lang属性定义页面语言为简体中文，帮助浏览器/搜索引擎识别语言类型，属性值用双引号包裹 -->
<head>
  <meta charset="UTF-8"> <!-- 声明字符编码为UTF-8，确保中文等多字符正常显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配移动设备，使页面自适应屏幕宽度 -->
  <title>学生信息管理系统</title> <!-- 定义网页标题，显示在浏览器标签栏 -->
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; padding: 20px; max-width: 1000px; margin: 0 auto; }
    h1, h2 { color: #333; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
    th, td { border: 1px solid #ccc; padding: 10px; text-align: left; }
    th { background-color: #f5f5f5; }
    .form-group { margin-bottom: 15px; }
    label { display: block; margin-bottom: 5px; font-weight: bold; }
    input, select, textarea { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
    button { background-color: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; }
    button:hover { background-color: #45a049; }
    .required { color: red; }
  </style>
</head>
<body>
  <h1>学生信息管理系统</h1>

  <!-- 表格示例：学生信息表（用于结构化展示批量数据） -->
  <section>
    <h2>学生信息列表</h2>
    <table> <!-- table标签是表格容器，用于包裹所有表格相关元素 -->
      <thead> <!-- thead定义表格头部区域，通常包含列标题，语义化区分表格结构 -->
        <tr> <!-- tr标签定义表格的行，每行需包含td或th元素 -->
          <th>学号</th> <!-- th标签定义表格表头单元格，默认加粗居中，用于列标题说明 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>专业</th>
          <th>入学年份</th>
        </tr>
      </thead>
      <tbody> <!-- tbody定义表格主体区域，包含核心数据内容，与thead、tfoot配合提升语义化 -->
        <tr>
          <td>2023001</td> <!-- td标签定义表格数据单元格，用于存放具体数据，对应th的列含义 -->
          <td>张三</td>
          <td>男</td>
          <td>19</td>
          <td>计算机科学</td>
          <td>2023</td>
        </tr>
        <tr>
          <td>2023002</td>
          <td>李四</td>
          <td>女</td>
          <td>20</td>
          <td>电子信息工程</td>
          <td>2023</td>
        </tr>
        <tr>
          <td>2023003</td>
          <td>王五</td>
          <td>男</td>
          <td>19</td>
          <td>软件工程</td>
          <td>2023</td>
        </tr>
        <tr>
          <td>2023004</td>
          <td>赵六</td>
          <td>女</td>
          <td>21</td>
          <td>数据科学</td>
          <td>2023</td>
        </tr>
      </tbody>
      <tfoot> <!-- tfoot定义表格底部区域，通常用于汇总信息（如数据统计），语义化收尾表格 -->
        <tr>
          <!-- colspan属性定义单元格跨列数，此处跨6列，使内容在表格底部居中显示 -->
          <td colspan="6" style="text-align: center;">共有4名学生</td>
        </tr>
      </tfoot>
    </table>
  </section>

  <!-- 表单示例：添加新学生（用于收集用户输入并提交数据） -->
  <section>
    <h2>添加新学生</h2>
    <!-- form标签是表单容器，action指定数据提交的后端地址，method指定提交方式（post/get） -->
    <form action="/students" method="post">
      <div class="form-group">
        <!-- label标签关联表单元素，for属性值与对应input的id一致，点击label可聚焦到input，提升可访问性 -->
        <label for="student-id">学号 <span class="required">*</span></label>
        <!-- input标签是单行输入控件，type="text"表示普通文本输入；id与label的for关联；name是后端接收数据的键名 -->
        <!-- required表示该字段必填；pattern定义输入格式（7位数字）；title是格式错误时的提示文本 -->
        <input type="text" id="student-id" name="studentId" required pattern="^\d{7}$" title="请输入7位数字学号">
      </div>

      <div class="form-group">
        <label for="name">姓名 <span class="required">*</span></label>
        <input type="text" id="name" name="name" required> <!-- 普通文本输入，必填项 -->
      </div>

      <div class="form-group">
        <label for="gender">性别</label>
        <!-- select标签定义下拉选择框，用于提供预设选项供用户选择 -->
        <select id="gender" name="gender">
          <!-- option标签是select的子选项，value是提交给后端的值，标签内文本是用户看到的选项 -->
          <option value="male">男</option>
          <option value="female">女</option>
          <option value="other">其他</option>
        </select>
      </div>

      <div class="form-group">
        <label for="age">年龄</label>
        <!-- type="number"限制输入为数字，min/max定义数值范围（16-30岁） -->
        <input type="number" id="age" name="age" min="16" max="30">
      </div>

      <div class="form-group">
        <label for="major">专业 <span class="required">*</span></label>
        <select id="major" name="major" required>
          <option value="">请选择专业</option> <!-- 空值选项引导用户选择，避免默认提交无效值 -->
          <option value="cs">计算机科学</option>
          <option value="ee">电子信息工程</option>
          <option value="se">软件工程</option>
          <option value="ds">数据科学</option>
          <option value="other">其他</option>
        </select>
      </div>

      <div class="form-group">
        <label for="enrollment-year">入学年份 <span class="required">*</span></label>
        <!-- type="date"提供日期选择器，用户无需手动输入日期格式，提升输入效率 -->
        <input type="date" id="enrollment-year" name="enrollmentYear" required>
      </div>

      <div class="form-group">
        <label for="email">电子邮箱</label>
        <!-- type="email"自动验证输入格式是否符合邮箱规则（含@和域名） -->
        <input type="email" id="email" name="email" placeholder="student@example.com"> <!-- placeholder是输入框提示文本 -->
      </div>

      <div class="form-group">
        <label for="notes">备注</label>
        <!-- textarea标签定义多行文本输入框，rows定义默认显示行数，用于输入长文本（如备注） -->
        <textarea id="notes" name="notes" rows="3" placeholder="请输入其他相关信息"></textarea>
      </div>

      <div class="form-group">
        <!-- type="checkbox"是复选框，用户可勾选/取消，name相同可实现多选（此处单选项，用于确认订阅） -->
        <label>
          <input type="checkbox" name="newsletter" value="yes"> 订阅学生通讯
        </label>
      </div>

      <!-- button标签定义表单按钮，type="submit"触发表单提交，将数据发送到action指定地址 -->
      <button type="submit">提交</button>
      <!-- type="reset"重置表单所有输入项，恢复初始状态 -->
      <button type="reset">重置</button>
    </form>
  </section>
</body>
</html>